// 定义路由
import React from 'react'
import { Routes, Route, useRoutes, Navigate } from 'react-router-dom'
// 引入页面相关的组件
import Home from '../views/Home'
import Login from '@/views/Login'
import Cart from '@/views/Cart'
import Detail from '@/views/Detail'
import Design from '@/views/Design'
import Step2 from '@/components/Step2'
import Step3 from '@/components/Step3'
import Mine from '@/views/Mine'
import Address from '@/views/Address'
import Order from '@/views/Order'
type Props = {}
// 注意：三步的效果都是一样的
export default function Index(props: Props) {
    const elements = useRoutes(
        // 第二步：使用useRoutes将第一步改造成路由表，并由变量 {elements}替代了
        [
            { path: '/home', element: <Home /> },
            { path: '/login', element: <Login /> },
            { path: '/design', element: < Design /> },
            { path: '/design/step2', element: < Step2 /> },
            { path: '/design/step3', element: < Step3 /> },
            { path: '/detail/:proid', element: <Detail /> },  // navigate('/detail/'+item.proid)  //也要是一致的
            { path: '/cart', element: <Cart/> },
            { path: '/mine', element: <Mine/> },
            { path: '/address', element: <Address/> },
            { path: '/order', element: <Order/> },
            { path: '/', element: <Navigate to='/home'></Navigate> },
        ]
        // 第三步，将路由表抽离封装成rules文件
    )

    return (
        <>
            {elements}

            {/* 第一步:将一开始的路由写出来，实现基本的效果，导航跳转一定要在app.jsx中使用才能展现出来 */}
            {/* <Routes>
                <Route path='/home' element={<Home />}></Route>
                <Route path='/login' element={<Login />}></Route>
                <Route path='/cart' element={<Cart />}></Route>
                <Route path='/detail' element={<Detail />}></Route> */}
            {/* 重定向 用到Navigate组件*/}
            {/* <Route path='/' element={<Navigate to='/home'></Navigate>}></Route>
            </Routes> */}
        </>
    )
}


